<html>

	<head>

		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>视频单聊</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" href="css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="css/common.css"/>

		<style type="text/css">
			.video-chat .friend_info {
				display: flex;
				position: fixed;
				top: 0;
				width: 100%;
				color: #ffffff;
				z-index: 2;
				padding: 20px;
			}
			
			.video-chat .friend_avatar {
				height: 70px;
				width: 70px;
				border-radius: 5px;
				margin-right: 20px;
			}
			
			.video-chat .friend_avatar img {
				width: 100%;
				height: 100%;
				display: block;
			}
			
			.video-chat .friend_name {
				font-size: 32px;
				margin-bottom: 6px;
			}
			
			.my-look {
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			
			.my-look-mask {
				background-color: rgba(0, 0, 0, 0.7);
				height: 100%;
				width: 100%;
			}
			
			
		</style>
	</head>

	<body>

		<div class="video-chat">

			<!-- 对方信息 -->
			<div class="friend_info">
				<div class="friend_avatar">
					<img src="img/qiangge.jpg" alt="">
				</div>
				<div>
					<div class="friend_name">这是名字</div>
					<div class="friend_state">等待对方接受邀请</div>
				</div>
			</div>

			<!-- 自己的影像 -->
			<div class="my-look">
				<div class="my-look-mask"></div>
			</div>

			<!-- 操作 -->
			<div class="video-opt">

				<div class="video-opt-change">

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-mute iconfont solid_item"></div>
						<div class="opt_name">静音</div>
					</a>

					<a href="javascript:;" class="opt_item" onclick="go_to_audio()">
						<div class="opt_icon icon-go_audio iconfont noBorder"></div>
						<div class="opt_name">切到语音通话</div>
					</a>

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-camera iconfont solid_item"></div>
						<div class="opt_name">切换摄像头</div>
					</a>

				</div>

				<div class="video-opt-last">

					<a href="javascript:;" class="opt_item"  onclick="go_to_audio()">
						<div class="opt_icon icon-go_audio iconfont"></div>
						<div class="opt_name">切到语音通话</div>
					</a>

					<!-- <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-hangup iconfont"></div>
                        <div class="opt_name">拒绝</div>
                    </a>
                    
                    <a href="javascript:;" class="opt_item">
                        <div class="opt_icon icon-hangup iconfont"></div>
                        <div class="opt_name">挂断</div>
                    </a> -->

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-answer iconfont"></div>
						<div class="opt_name">接听</div>
					</a>

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-change_camera iconfont"></div>
						<div class="opt_name">切换摄像头</div>
					</a>

				</div>
			</div>

		</div>

		<script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	
		<script type="text/javascript">
			
			function go_to_audio(){
				
				console.log(22222222)
				location.href="audio_one.html"
			}
		</script>
	</body>

</html>